<template>
  <div class="layout">
    <NavHeader></NavHeader>
    <main class="max-container">
      <!-- 公共导航 -->
      <ul class="common-navs">
        <li>
          <a
            :class="['nav-item', { active: item.active }]"
            :href="item.link"
            v-for="(item, index) in nav"
            :key="index"
          >
            {{ $t(item.name) }}
          </a>
        </li>
      </ul>

      <a-carousel
        class="swipe-banner"
        autoplay
        v-if="banner && banner.length > 0"
      >
        <div v-for="item in banner" :key="item.id">
          <a :href="item.hrefurl" target="_blank">
            <img :src="item.imgurl" :alt="item.hrefname" />
          </a>
        </div>
      </a-carousel>

      <slot></slot>
    </main>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import NavHeader from "./NavHeader.vue";
import Footer from "./Footer.vue";
import { getBanner } from "@/api/common";

const emit = defineEmits(["initData"]);

const nav = ref([
  {
    name: "Home",
    link: "/",
    active: false,
  },
  {
    name: "NewsCenter",
    link: "/news",
    active: false,
  },
  {
    name: "ContactUs",
    link: "/contact",
    active: false,
  },
]);
const banner = ref([]);
onMounted(() => {
  nav.value = nav.value.map((item) => {
    item.active = window.location.pathname.indexOf(item.link) === 0;
    if (item.active && item.link === "/" && window.location.pathname !== "/") {
      item.active = false;
    }
    // if (window.location.pathname !== "/" && item.link === "/") {
    //   item.active = false;
    // }
    return item;
  });

  getBanner().then((res) => {
    emit("initData", res);
    const pagecontent = res.pagecontent || [];
    const bannerData = pagecontent.find((item) => {
      return item.temp === "banner";
    });
    if (banner) {
      banner.value = bannerData.data;
    }
  });
});
</script>

<style lang="less">
body {
  background-image: url("../assets/layout-bg.png");
  background-repeat: repeat;
  background-size: auto;
}
.layout {
  width: 100%;
}
main.max-container {
  padding-top: 10px;
  padding-bottom: 30px;
  min-height: calc(100vh - 102px);
}

.common-navs {
  margin-bottom: 10px;
}
.nav-item {
  color: rgba(0, 0, 0, 0.88);
  font-size: 8px;
  padding: 6px 14px;
  background-color: #fff;
  text-decoration: none;
  display: inline-block;
  min-width: 70px;
  text-align: center;
  line-height: 1.5;
  &.active {
    background: linear-gradient(135deg, #03b764 0%, #03b764 3%, #0490ac 100%);
    color: #fff;
  }
}

.swipe-banner {
  border-radius: 4px;
  margin-bottom: 10px;

  a {
    display: block;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
